<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/ops.js" type="text/javascript"></script>
    <link href="css/UserCSS.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery3.min.js" type="text/javascript"></script>
<style type="text/css">
	th{
		text-align:center;
	}
	.content{
		font-family:'宋体';
		font-size: 14px;
	}
	.content-row{
		text-align:center;
		
	}
	span {
		font-size: 15px;
		color:saddlebrown;
	}
	.button{
		color:brown;
		width:49px;
		height: 24px;
		font-size: 14px;
	}
	#update{
		border: 1px solid #c8cbd8; 
		margin-top:10px;
	}
</style>
</head>
<body>
    <div class="row" style="margin-top: 10px;">
    </div>
    <div class="row">
        <div class="u-menu">
            <ul class="u-nav" id="user_menu">
                <li class="item" id="user_menu_my" name="user_menu_my">
                    <h3 class="t1">我的个人中心<span title="折叠"></span></h3>
                    <ul class="sub">
                        <!-- <li><a href="个人主页.jsp">个人主页</a></li> -->
                        <li><a href="个人资料.jsp">个人资料</a></li>
                        <li><a class="current" href="认证管理.jsp">认证管理</a></li>
                        <li><a href="密码管理.jsp">密码设置</a></li>
                    </ul>
                </li>
                <li class="item" id="user_menu_loan" name="user_menu_loan">
                    <h3 class="t3">贷款管理<a name="user_login"></a><span title="折叠"></span></h3>
                    <ul class="sub">
                            <li><a href="queryRetmsgInfo.do">我的贷款</a></li>
                            <li><a href="queryRepaymentInfo.do?nper=${Nper }">偿还贷款</a></li>
                            <li><a href="LoanStatistics.do">贷款统计</a></li>
                    </ul>
                </li>
             </ul>
             <script type="text/javascript">
                var menuClosed = Ops.getCookie('menuClosed');
                $(".item h3 span").click(function () {
                    menuClosed = Ops.getCookie('menuClosed');
                    if (menuClosed == undefined || menuClosed == null) {
                        menuClosed = '';
                        Ops.setCookie('menuClosed', menuClosed);
                    }
                    //console.log(menuClosed+',click;;;');	
                    $(this).parent().parent().toggleClass('bg-slide');
                    $(this).parent().parent().find(".sub").slideToggle('fast');

                    if ($(this).attr('title') == '折叠') {
                        $(this).attr('title', '展开');
                    } else {
                        $(this).attr('title', '折叠');
                    }
                    var pid = $(this).parent().parent().attr('id');
                    if ($(this).parent().parent().hasClass('bg-slide') && menuClosed.indexOf("#" + pid + "#") == -1) {
                        var cookies = menuClosed + '#' + pid + '#';
                    } else {
                        var cookies = menuClosed.replace("#" + pid + "#", '');
                    }
                    Ops.setCookie('menuClosed', cookies);
                });
                if (menuClosed != null) {
                    var closedMatch = menuClosed.match(/([a-z_]+)/g);
                    for (var i in closedMatch) {
                        var idObj = $('#' + closedMatch[i]);
                        idObj.toggleClass('bg-slide');
                        idObj.find(".sub").hide();
                        idObj.find('h3 span').attr('title', '展开');
                    }
                } else {
                    $("#user_menu_loan h3 span").click();
                }
            </script>
        </div>
        <div class="u-main">
            <div id="tab_menu">
                <ul class="u-tab clearfix">
                    <li class="current"><a>身份认证</a></li>
                    <li><a>手机认证</a></li>
                    <li><a>邮箱认证</a></li>
                </ul>
            </div>
            <div id="tab_box">
                <div class="u-form-wrap">                  
                    <div>
                        这是身份认证</div>
                </div>
                <div class="u-form-wrap" style="display:none;">                   
                    <div class="content">
                    	<h3>绑定手机号</h3>
                    </div>
                    <div class="content">
                    	<table style="border:1px solid #c8cbd8;color:#8c605c;background-color:#ece7e79e;">
                    		<tr>
                    			<th style="width: 160px;height: 40px;">${userInfo.u_name}</th>
                    			<th style="width: 160px;height: 40px;">${userInfo.u_sex}</th>
                    			<th style="width: 240px;height: 40px;">${userInfo.phone}</th>
                    			<th style="width: 200px;height: 40px;">
                    				<input type="button" class="button" value="更换绑定手机？" onclick="show()" style="width:100px;height:30px;">
                    			</th>
                    		</tr>
                    	</table>
                    </div>
                    <div class="content" style="display:none;" id="update">
        				<div class="content-row">
                    		<span>*已向原绑定的手机</span>
                    		<span style="color: blue;">${userInfo.phone}</span>
                    		<span>发送验证，请稍后...</span><br>
                    	</div>
                    	<div class="content-row">
                    		<span id="mgs1">&nbsp;</span><br>
                    		<span>请输入验证码：</span><input type="text" id="code" style="width: 135px;height: 20px;margin-bottom: 2px;"><br>
                    	</div>
                    	<div class="content-row">
                    		<span id="mgs2">&nbsp;</span><br>
                    		<span>请输入新号码：</span><input type="text" id="newphone" onblur="isNoPH()" style="width: 135px;height: 20px;margin-bottom: 2px;"><br>
                    	</div>
                    	<div class="content-row" style="margin-top: 15px;margin-bottom: 20px;">
                    		<span id="mgs3">&nbsp;</span><br>
                    		<input class="button" type="button" value="确定" id="affirm"/>
                    		<input class="button" type="button" value="取消" id="cancel"/><br>
                    	</div>
                    </div>
                </div>
                <script type="text/javascript">
                	function show() {
                		$("#update").css("display","block");
                		$.ajax({
            				type:"post",
            				url:"intoCode.do",
            				dataType:"json",
            				success:function(data){
            					if(data.result==true){
            						alert("发送短信成功！");
            					}else{
            						alert("发送短信失败！");
            					}
            				},
            				error:function(){
            					alert("失败!");
            				}
                		});
					}
                	
                	/* 检查手机格式  */
                	var a=false;
                	function isNoPH(){  
                		var newphone=/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;  
                		var content=$("#newphone").val();
                	       if(!newphone.test(content)){
                	    	    $("#mgs2").html("手机号码输入格式有误！");
                				$("#mgs2").css("color","red"); 
                				a=false;
                	       }else{
                	    	    $("#mgs2").html("&nbsp;");
                				$("#mgs2").css("color","white"); 
                				a=true;
                	       }
                	}
	                $(function() {
	                	$("#affirm").click(function(){
	                		if(a==true){
	                			$("#mgs3").html("&nbsp;");
	                			$("#mgs3").css("color","white");
	                			$.ajax({
	                				data:{"code":$("#code").val(),"newphone":$("#newphone").val()},
	                				type:"post",
	                				url:"<%=basePath%>updatePhoneByCode.do",
	                				dataType:"json",
	                				success:function(data){
	                					if(data.result=="errorCode"){
	                						$("#mgs1").html("验证码输入错误");
	                						$("#mgs1").css("color","red"); 
	                					}else{
	                						$("#mgs1").html("&nbsp;");
	                						$("#mgs1").css("color","white");
	                						if(data.result=="errorNewphone"){
	                							$("#mgs2").html("此手机号码已绑定其他用户");
	                    						$("#mgs2").css("color","red");
	                						}else{
	                							$("#mgs2").html("&nbsp;");
	                    						$("#mgs2").css("color","white");
	                    						if(data.result==true){
	                    							alert("手机绑定修改成功！");
	                    							location.href="<%=basePath%>个人资料.jsp";
	                    						}else{
	                    							alert("手机绑定修改失败！");
	                    							location.href="<%=basePath%>个人资料.jsp"
	                    						}
	                						}
	                					}
	                				},
	                				error:function(){
	                					alert("失败!");
	                				}
	                			});
	                		}else{
	                			$("#mgs3").html("输入信息有误!");
	                			$("#mgs3").css("color","red"); 
	                		}
	                	});
	                });
	                $(function() {
                		$("#cancel").click(function(){
                			location.href="<%=basePath%>个人资料.jsp";         		
                		});
	                });
                </script>
                <div class="u-form-wrap" style="display: none;">                   
                    <div>
                        这是邮箱认证</div>
                </div>
            </div>
        </div>
        <script type="text/javascript">

            var $div_li = $("#tab_menu ul li");

            $div_li.click(function () {

                $(this).addClass("current").siblings().removeClass("current");

                var div_index = $div_li.index(this);

                $("#tab_box>div").eq(div_index).show().siblings().hide();

            }).hover(function () {

                $(this).addClass("hover");

            }, function () {

                $(this).removeClass("hover");

            });

        </script>
    </div>
</body>
</html>